import { defineComponent, onMounted, reactive, ref } from 'vue'
import source from './style/source.module.scss'
import listComponent from '@/components/list-component'
import { getDateSource, editDataSource, deleteDataSource } from '@/api/source'
import sourceDialog from './component/sourceDialog'
export default defineComponent({
  props: {},
  emits: [],
  components: {},
  setup(props, ctx) {
    /* 
    设置data默认值
    表格数组要用reactive
    face:表格头
    tableRender:表格行渲染函数
    */
    const data = reactive({
      pageNum: 1, //页码
      pageSize: 10, //条数
      totalelements: 0, //总条数
      tableData: [],
      dialogTableVisible: false, //打开弹窗
      isEdit: false,
      editId: '',
      loading:false
    })
    const face = [
      {
        prop: 'linkName',
        label: '数据源名称'
      },
      {
        prop: 'userName',
        label: '用户名'
      },
      {
        prop: 'dbIp',
        label: 'ip地址'
      },
      {
        prop: '',
        label: '操作'
      }
    ]
    const tableRender = (item) => {
      if (item.label === '操作')
        return (
          <el-table-column
            label={item.label}
            v-slots={{
              default: ({ row }) => {
                return (
                  <>
                    <el-button size="small" type="primary" onClick={() => editChange(row.id)}>
                      编辑
                    </el-button>
                    <el-button size="small" type="primary" onClick={() => deleteChange(row.id)}>
                      删除
                    </el-button>
                  </>
                )
              }
            }}
          ></el-table-column>
        )
      else return <el-table-column prop={item.prop} label={item.label} />
    }
    /* 
    操作：编辑、删除、测试连接
    */
    const editChange = (id) => {
      data.isEdit = true
      data.editId = id
      buildChange()
    }
    const deleteChange = (id) => {
      deleteDataSource({ id })
        .then((res) => {
          const { success, message } = res
          alert(message)
          getDateSource()
        })
        .catch(() => {})
    }
    /* 
    数据源弹窗相关操作
    */
    const buildChange = () => {
      data.dialogTableVisible = !data.dialogTableVisible
    }
    const CloseChange = (is) => {
      data.isEdit = false
      data.dialogTableVisible = false
      if (is) querryDateSource()
    }
    /* 
    数据源列表请求
    分页操作
    */
    const querryDateSource = () => {
      data.loading = true
      const param = {
        pageNum: data.pageNum - 1,
        pageSize: data.pageSize
      }
      getDateSource(param)
        .then((res) => {
          data.totalelements = res.totalelements
          data.tableData = res.data
          data.loading = false
        })
        .catch(() => {})
    }
    const sizeChange = (val) => {
      data.pageSize = val
      querryDateSource()
    }
    const pageChange = (val) => {
      data.pageNum = val
      querryDateSource()
    }
    /* 
    生命周期请求数据源
    */
    onMounted(() => {
      querryDateSource()
    })
    return () => (
      <>
        <sourceDialog
          visible={data.dialogTableVisible}
          onCloseChange={CloseChange}
          isEdit={data.isEdit}
          editId={data.editId}
        ></sourceDialog>
        <listComponent
          onSizeChange={sizeChange}
          onPageChange={pageChange}
          totalelements={data.totalelements}
          v-slots={{
            left: () => {
              return <p>数据源配置</p>
            },
            right: () => {
              return (
                <el-button size="small" type="primary" onClick={buildChange}>
                  创建
                </el-button>
              )
            }
          }}
        >
          <div class={source.source_main}>
            <el-table data={data.tableData} border v-loading={data.loading}>
              {face.map((item, index) => tableRender(item))}
            </el-table>
          </div>
        </listComponent>
      </>
    )
  }
})
